<template>
    <div class="vinnercomponent">
        <h2>内置组件</h2>
        <div class="hr"></div>
        <!-- *************************************** -->
        <el-tag effect="dark">component</el-tag>
        <p class="decr">
            和is属性一起，用于动态组件的切换。<br>
        </p>
        <el-button @click="$router.push('/is')" style="marginTop: 10px;">点击跳转到is属性</el-button>
        <div class="hr"></div>
        <!-- *************************************** -->
        <el-tag effect="dark">transition</el-tag>
        <p class="decr">
            通过使用不同的属性，完成css动画。<br>
            <el-tag>
                <a 
                    href="https://cn.vuejs.org/v2/api/#transition"
                    target="_blank"
                    class="a"
                    >点击查看用法</a>
            </el-tag>
        </p>
        <div class="hr"></div>
        <!-- *************************************** -->
        <el-tag effect="dark">keep-alive</el-tag>
        <p class="decr">
            被keep-alive包裹的组件，在隐藏时，不会被销毁。<br>
            当被包裹的组件切换为显示时，会保留原有的状态。<br>
        </p>
        <p class="decr">
            用法：<br>
            1. 用于包裹组件<br>
            {{keepalivecomp}}<br>
            2. 用于包裹路由组件<br>
            {{keepaliveroutercomp}}<br>
        </p>
        <div class="hr"></div>
        <!-- *************************************** -->
        <el-tag effect="dark">slot</el-tag>
        <p class="decr">
            插槽。<br>
            <el-button @click="$router.push('/command')" style="marginTop: 10px;">点击跳转到slot指令</el-button>
        </p>
        <div class="hr"></div>
        <el-tag
            effect="dark"
            type="success"
            >
            <a :href="getHref" target="_blank">查看示例代码</a>
        </el-tag>
    </div>
</template>

<script>
import mixinPage from './mixin-page';

export default {
    name: 'Vinnercomponent',
    mixins: [mixinPage],
    data() {
        return {
            keepalivecomp: `<keep-alive>
                <component-a>xxx</component-a>
            </keep-alive>`,
            keepaliveroutercomp: `<keep-alive>
                <router-view></router-view>
            </keep-alive>`,
        }
    }
}
</script>

<style lang="less" scoped>
@import '../assets/css/mixin-frame.less';
</style>